import { useNavigate } from 'react-router-dom'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { BookOpen, Volume2, RotateCcw, Star } from 'lucide-react'

const StudentHomepage = () => {
  const navigate = useNavigate()

  const progress = 75 // 示例进度

  return (
    <div className="min-h-screen p-4">
      {/* Header */}
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold text-blue-800 mb-2">Learn English</h1>
        <p className="text-lg text-blue-600">6th Grade</p>
      </div>

      {/* Today's Task Card */}
      <Card className="mb-8 bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6 text-center">
          <h2 className="text-2xl font-bold text-blue-800 mb-6">Today's Task</h2>
          
          {/* Progress Circle */}
          <div className="relative w-32 h-32 mx-auto mb-4">
            <svg className="w-32 h-32 transform -rotate-90" viewBox="0 0 100 100">
              <circle
                cx="50"
                cy="50"
                r="40"
                stroke="currentColor"
                strokeWidth="8"
                fill="transparent"
                className="text-gray-200"
              />
              <circle
                cx="50"
                cy="50"
                r="40"
                stroke="currentColor"
                strokeWidth="8"
                fill="transparent"
                strokeDasharray={`${2 * Math.PI * 40}`}
                strokeDashoffset={`${2 * Math.PI * 40 * (1 - progress / 100)}`}
                className="text-teal-400"
                strokeLinecap="round"
              />
            </svg>
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="text-3xl font-bold text-blue-800">{progress}%</span>
            </div>
          </div>
          
          <p className="text-lg font-semibold text-blue-700">Keep it up!</p>
        </CardContent>
      </Card>

      {/* Function Buttons */}
      <div className="grid grid-cols-2 gap-4">
        <Button
          onClick={() => navigate('/word-card')}
          className="h-24 bg-orange-400 hover:bg-orange-500 text-white rounded-2xl flex flex-col items-center justify-center gap-2"
        >
          <BookOpen size={32} />
          <span className="text-lg font-semibold">Word Card</span>
        </Button>

        <Button
          onClick={() => navigate('/follow-reading')}
          className="h-24 bg-red-400 hover:bg-red-500 text-white rounded-2xl flex flex-col items-center justify-center gap-2"
        >
          <Volume2 size={32} />
          <span className="text-lg font-semibold">Follow-reading</span>
        </Button>

        <Button
          onClick={() => navigate('/mistake-book')}
          className="h-24 bg-teal-400 hover:bg-teal-500 text-white rounded-2xl flex flex-col items-center justify-center gap-2"
        >
          <RotateCcw size={32} />
          <span className="text-lg font-semibold">Review</span>
        </Button>

        <Button
          onClick={() => navigate('/weekly-report')}
          className="h-24 bg-yellow-400 hover:bg-yellow-500 text-white rounded-2xl flex flex-col items-center justify-center gap-2"
        >
          <Star size={32} />
          <span className="text-lg font-semibold">Check-in</span>
        </Button>
      </div>
    </div>
  )
}

export default StudentHomepage

